<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="wrap">
        <ul class="list">
            <li class="item active"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ul class="pointList">
            <li class="point" date.index="0"></li>
            <li class="point" date.index="1"></li>
            <li class="point" date.index="2"></li>
            <li class="point" date.index="3"></li>
            <li class="point" date.index="4"></li>
        </ul>
        <button type="button" class="btn" id="goPre">&#60</button>
        <button type="button" class="btn" id="goNext">&#62</button>
    </div>
    <script type="text/javascript">
        var items = document.getElementsByClassName("item");
        var points = document.getElementsByClassName("point");
        var goPreBtn = document.getElementById("goPre");
        var goNextBtn = document.getElementById("goNext");

        var index = 0;
        var clearActive = function () {
            for (var i = 0; i < items.length; i++)
                items[i].className = "item";
            for (var i = 0; i < points.length; i++)
                points[i].className = "point";
        }
        var goIndex = function () {
            clearActive();
            items[index].className = "item active";
            points[index].className = "point active";
        }
        var goNext = function () {
            if (index < 4) {
                index++;
            }
            else {
                index = 0;
            }
            goIndex();
        }
        var goPre = function () {
            if (index == 0) {
                index = 0;
            }
            else {
                index--;
            }
            goIndex();
        }
        goNextBtn.addEventListener('click', function () {
            goNext();
        })
        goPreBtn.addEventListener('click', function () {
            goPre();
        })
        var timer=setInterval(function () {
            goNext();
        }, 3000)

            var pointNum=0;
            for(let i=0;i<points.length;i++)
            {
                points[i].addEventListener('click',function(){
                    pointNum=index;
                    index=i;
                    points[pointNum].className='point';
                    points[index].className='point active';
                    items[pointNum].className='item';
                    items[index].className='item active';
                })
            }//肥肠经典，我饿了。
 
       
    </script>
</body>

</html>